<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>🎧</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="container">
        <header>
            <h1 class="font-weight-bold text-center">
                <a href="/" class="text-decoration-none text-danger"><i class="fas fa-headphones"></i></a>
            </h1>
            <div class="form-inline md-md-12 float-right">
                <div class="form-group mx-sm-3 mb-2">
                    <label for="search" class="sr-only">搜一搜</label>
                    <input type="text" class="form-control" id="search" placeholder="搜一搜">
                </div>
                <button type="button"" class=" btn btn-danger mb-2" onclick="searchSong()"><i
                        class="fas fa-search"></i></button>
            </div>
        </header>
        <section>
            <table class="table table-hover">
                <thead class="thead-light">
                    <tr>
                        <th scope="col" colspan="3" id="songListName">云音乐热歌榜</th>
                    </tr>
                </thead>
                <tbody class="list" id="songList">
                </tbody>
            </table>
            <nav id="pageNav" aria-label="Page navigation example">
                <ul id="pageNo" class="pagination overflow-auto">
                </ul>
            </nav>
        </section>
    </div>
    <!-- 音频Toast -->
    <div id="musicToast" class="toast toast-s" role="alert" aria-live="polite" aria-atomic="true">
        <div class="toast-header">
            <i class="fas fa-play"></i>
            <strong class="mr-auto margin-10">正在播放...</strong>
            <small></small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">
            <div id="aplayer"></div>
        </div>
    </div>
    <!-- 视频模态框 -->
    <div class="modal fade bd-example-modal-xl" id="videoModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="videoModalTitle"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <video id="nowVideo" style="width: 100%" controls preload></video>
                </div>
                <div class="modal-footer">
                    <div id="mvResolution" class="btn-group btn-group-sm" role="group" aria-label="Basic example"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>

</html>